<template>
  <canvas id="canvasRadar"></canvas>
</template>
<script setup lang="ts">
onMounted(() => {
  let testtimer
  if (testtimer) {
    clearInterval(testtimer)
  }
  const canvas = document.getElementById('canvasRadar') as any
  const ctx = canvas.getContext('2d')

  canvas.width = 80
  canvas.height = 80
  let radius = 0

  function drawCircle() {
    ctx.beginPath()
    ctx.arc(40, 40, radius, 0, Math.PI * 2)
    ctx.closePath()
    ctx.lineWidth = 0.5
    ctx.strokeStyle = 'red'
    ctx.stroke()
    radius += 0.5
    if (radius > 30) {
      radius = 0
    }
  }

  function render() {
    const prev = ctx.globalCompositeOperation
    ctx.globalCompositeOperation = 'destination-in'
    ctx.globalAlpha = 0.9
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    ctx.globalCompositeOperation = prev
    drawCircle()
  }
  testtimer = setInterval(function () {
    render()
  }, 8)
})
</script>
